<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker simple datePickerStartEnd demo with code to list dates</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
			$(function()
            {
				$('.date-pick').datePicker()
				$('#start-date').bind(
					'dpClosed',
					function(e, selectedDates)
					{
						var d = selectedDates[0];
						if (d) {
							d = new Date(d);
							$('#end-date').dpSetStartDate(d.addDays(1).asString());
						}
					}
				);
				$('#end-date').bind(
					'dpClosed',
					function(e, selectedDates)
					{
						var d = selectedDates[0];
						if (d) {
							d = new Date(d);
							$('#start-date').dpSetEndDate(d.addDays(-1).asString());
						}
					}
				);
				$('#go-button').bind(
					'click',
					function(e)
					{
						var d = $('#start-date').dpGetSelected()[0];
						var endD = $('#end-date').dpGetSelected()[0];
						var datesInRange = [];
						if (d && endD)
						{
							d = new Date(d)
							endD = endD;
							while (d.getTime() != endD)
							{
								datesInRange.push(d.asString());
								d.addDays(1);
							}
							alert(datesInRange);
						} else {
							alert('Please select start and end dates');
						}
						return false;
					}
				);
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: linked datePickers with start and end dates and code to get a list of dates</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                The following example displays how you can synchronise two date pickers together and get a list of all of the dates
				that fall between the start date and end date...
            </p>
			<form name="chooseDateForm" id="chooseDateForm" action="#">
				<fieldset>
					<legend>Test date picker form</legend>
                    <ol>
                        <li>
                            <label for="start-date">Start date:</label>
							<input name="start-date" id="start-date" type="text" class="date-pick" />
						</li>
                        <li>
                            <label for="end-date">End date:</label>
							<input name="end-date" id="end-date" type="text" class="date-pick" />
						</li>
                        <li>
							<input id="go-button" type="button" value="Go" />
						</li>
                        <li>
                            <label for="test-select">Test select:</label>
                            <select name="test-select" id="test-select" style="width: 170px">
                                <option value="1">Test SELECT </option>
                                <option value="2">Doesn't shine through</option>
                                <option value="3">Even in IE</option>
                                <option value="4">Yay!</option>
                            </select>
                        </li>
					</ol>
				</fieldset>
			</form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">
$(function()
{
	$('.date-pick').datePicker()
	$('#start-date').bind(
		'dpClosed',
		function(e, selectedDates)
		{
			var d = selectedDates[0];
			if (d) {
				d = new Date(d);
				$('#end-date').dpSetStartDate(d.addDays(1).asString());
			}
		}
	);
	$('#end-date').bind(
		'dpClosed',
		function(e, selectedDates)
		{
			var d = selectedDates[0];
			if (d) {
				d = new Date(d);
				$('#start-date').dpSetEndDate(d.addDays(-1).asString());
			}
		}
	);
	$('#go-button').bind(
		'click',
		function(e)
		{
			var d = $('#start-date').dpGetSelected()[0];
			var endD = $('#end-date').dpGetSelected()[0];
			var datesInRange = [];
			if (d && endD)
			{
				d = new Date(d)
				endD = endD;
				while (d.getTime() != endD)
				{
					datesInRange.push(d.asString());
					d.addDays(1);
				}
				alert(datesInRange);
			} else {
				alert('Please select start and end dates');
			}
			return false;
		}
	);
});</pre>
			<h2>Page CSS</h2>
			<pre class="sourcecode">
/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}</pre>
        </div>
	</body>
</html>